<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>练习-下拉框</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <style type="text/css">
    	body{
    		font-family: "Microsoft YaHei";
    		text-align: center;
    	}
    	#mainDiv {
    		width: 100%;
    		text-align: center;
    		margin-top:10px;
    	}
    </style>
    <script type="text/javascript">
    
    var cityOfChn = ["北京", "上海", "广州", "深圳"];
    var cityOfUsa = ["华盛顿特区", "纽约", "洛杉矶", "芝加哥"];
    	$(document).ready(function(){
    		//选择国家
    		$("#country").change(function(){
    			var country = $.trim($(this).val());
    			var cities = [];
    			if("中国" == country){
    				cities = cityOfChn;
    			} else if("美国" == country){
    				cities = cityOfUsa;
    			}
    			//遍历城市列表，并设置到城市列表下拉框中
    			initCity(cities);
    		});
    		
    		//根据城市数组初始化城市列表
    		function initCity(cities){
    			$("#city").empty();//清空原有的城市列表
    			$.each(cities, function(index, city){
    				$("#city").append("<option>" + city + "</option>");
    			});
    		}
    		
    		//选中 广州
    		$("#btn1").click(function(){
    			//1、国家选中 中国
    			$("#country").val("中国");
    			//2、初始化城市并选中第3个 广州
    			initCity(cityOfChn);
    			$("#city option:eq(2)").prop("selected", "true");
    		});
    		//选中 纽约
    		$("#btn2").click(function(){
    			//1、国家选中 美国
    			$("#country").val("美国");
    			//2、城市选中第2个 纽约
    			initCity(cityOfUsa);
    			$("#city option:eq(1)").prop("selected", "true");

    		});
    		
    	});
    </script>
  </head>
  
  <body>
    <div id="mainDiv">
    	<p>【中国：北京、上海、广州、深圳】，【美国：华盛顿特区、纽约、芝加哥、洛杉矶】</p><br>
    	<span>国家：</span>
    	<select id="country">
    		<option>请选择...</option>
    		<option value="中国">中国</option>
    		<option value="美国">美国</option>
    	</select>
    	<span>&nbsp;&nbsp;城市列表：</span>
    	<select id="city">
    	</select>
   	</div>
   	<br><br>
   	<hr>
   	<input type="button" id="btn1" value="选择城市为：广州">
   	<input type="button" id="btn2" value="选择城市为：纽约">
  </body>
</html>
